<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>The source code</title>
  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  <style type="text/css">
    .highlight { display: block; background-color: #ddd; }
  </style>
  <script type="text/javascript">
    function highlight() {
      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
    }
  </script>
</head>
<body onload="prettyPrint(); highlight();">
  <pre class="prettyprint lang-js"><span id='BUI'>/**
</span> * @fileOverview 每个标签对应一个面板
 * @ignore
 */

var BUI = require(&#39;bui-common&#39;),
  Tab = require(&#39;./tab&#39;),
  Panels = require(&#39;./panels&#39;);

<span id='BUI-Tab-TabPanel'>/**
</span> * 带有面板的切换标签
 * &lt;pre&gt;&lt;code&gt;
 * BUI.use(&#39;bui/tab&#39;,function(Tab){
 *   
 *     var tab = new Tab.TabPanel({
 *       render : &#39;#tab&#39;,
 *       elCls : &#39;nav-tabs&#39;,
 *       panelContainer : &#39;#panel&#39;,
 *       autoRender: true,
 *       children:[
 *         {text:&#39;源代码&#39;,value:&#39;1&#39;},
 *         {text:&#39;HTML&#39;,value:&#39;2&#39;},
 *         {text:&#39;JS&#39;,value:&#39;3&#39;}
 *       ]
 *     });
 *     tab.setSelected(tab.getItemAt(0));
 *   });
 * &lt;/code&gt;&lt;/pre&gt;
 * @class BUI.Tab.TabPanel
 * @extends BUI.Tab.Tab
 * @mixins BUI.Tab.Panels
 */
var tabPanel = Tab.extend([Panels],{

  bindUI : function(){
    var _self = this;
    //关闭标签
    _self.on(&#39;beforeclosed&#39;,function(ev){
      var item = ev.target;
      _self._beforeClosedItem(item);
    });
  },
  //关闭标签选项前
  _beforeClosedItem : function(item){
    if(!item.get(&#39;selected&#39;)){ //如果未选中不执行下面的选中操作
      return;
    }

    var _self = this,
      index = _self.indexOfItem(item),
      count = _self.getItemCount(),
      preItem,
      nextItem;
    if(index !== count - 1){ //不是最后一个，则激活最后一个
      nextItem = _self.getItemAt(index + 1);
      _self.setSelected(nextItem);
    }else if(index !== 0){
      preItem = _self.getItemAt(index - 1);
      _self.setSelected(preItem);
    }
  }

},{
  ATTRS : {
    elTagName : {
      value : &#39;div&#39;
    },
    childContainer : {
      value : &#39;ul&#39;
    },
    tpl : {
      value : &#39;&lt;div class=&quot;tab-panel-inner&quot;&gt;&lt;ul&gt;&lt;/ul&gt;&lt;div class=&quot;tab-panels&quot;&gt;&lt;/div&gt;&lt;/div&gt;&#39;
    },
    panelTpl : {
      value : &#39;&lt;div&gt;&lt;/div&gt;&#39;
    },
<span id='BUI-Tab-TabPanel-cfg-panelContainer'>    /**
</span>     * 默认的面板容器
     * @cfg {String} [panelContainer=&#39;.tab-panels&#39;]
     */
    panelContainer : {
      value : &#39;.tab-panels&#39;
    },
<span id='BUI-Tab-TabPanel-property-defaultChildClass'>    /**
</span>     * 默认子控件的xclass
     * @type {String}
     */
    defaultChildClass:{
      value : &#39;tab-panel-item&#39;
    }
  }
},{
  xclass : &#39;tab-panel&#39;
});

module.exports = tabPanel;
</pre>
</body>
</html>
